<template>
  <div class="query-div">
    <a-form
        ref="allMenuRef"
        :model="searchInfo"
        name="query_form"
        layout="inline"
        class="query-form"
    >
      <a-form-item
          name="menuid"
          label="菜单ID"
      >
        <a-input v-model:value.trim="searchInfo.menuid" placeholder="菜单ID支持全等查询"></a-input>
      </a-form-item>
      <a-form-item
          name="menucode"
          label="菜单码"
      >
        <a-input v-model:value.trim="searchInfo.menucode" placeholder="菜单码支持模糊查询"></a-input>
      </a-form-item>
      <a-form-item
          name="fatherid"
          label="父菜单ID"
      >
        <a-input v-model:value.trim="searchInfo.fatherid" placeholder="父级菜单ID支持全等查询"></a-input>
      </a-form-item>
      <a-form-item
          name="menuname"
          label="菜单名称"
      >
        <a-input v-model:value.trim="searchInfo.menuname" placeholder="菜单名称支持模糊查询"></a-input>
      </a-form-item>
      <a-form-item
          name="status"
          label="激活状态"
      >
        <a-select v-model:value="searchInfo.status" placeholder="请选择激活状态">
          <a-select-option value=''>--请选择--</a-select-option>
          <a-select-option value="0">未激活</a-select-option>
          <a-select-option value="1">激活</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
          name="timeRange"
          label="创建时间"
      >
        <a-config-provider :locale="zhCN">
          <a-range-picker v-model:value="searchInfo.timeRange" value-format="YYYYMMDD000000"/>
        </a-config-provider>
      </a-form-item>
    </a-form>
    <div class="query-button">
      <div>
        <a-button :loading="loading" @click="searchRes">查询</a-button>
        <a-button type="primary" @click="addRes">新增</a-button>
        <a-button type="dashed" @click="resetForm">重置</a-button>
      </div>
    </div>
  </div>
  <a-table
      :columns="columns"
      :row-key="record => record.menuid"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      :data-source="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'status'">
        <span v-if="record.status === '0'">未激活</span>
        <span v-if="record.status === '1'">已激活</span>
      </template>

      <template v-else-if="column.dataIndex === 'createtime'">
        <span
            v-if="record.createtime">{{
            record.createtime.substring(0, 4) + '-' + record.createtime.substring(4, 6) + '-' + record.createtime.substring(6, 8)
          }}</span>
      </template>

      <template v-else-if="column.key === 'action'">
        <span>
          <a-button type="primary" size="small" @click="updateRes(record)">编辑</a-button>
          <a-divider type="vertical"/>
          <a-popconfirm
              title="你确定删除此菜单吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="deleteRes(record)"
          >
          <a-button type="danger" size="small">删除</a-button>
          </a-popconfirm>
        </span>
      </template>
    </template>
  </a-table>

  <a-modal v-model:visible="addVisible" centered :title="updateData ? '修改菜单' : '新增菜单'" :footer="null" :closable="false"
           :maskClosable="false"
           :keyboard="false">
    <menu-add :menuData="data" :update-data="updateData" @on-cancel="handleCancel" @on-ok="handleOk"/>
  </a-modal>
</template>

<script>
import {computed, getCurrentInstance, onMounted, reactive, ref, toRefs, watch} from "vue";
import {apiRequest, queryAllMenu, deleteMenu} from "@/service/service";
import MenuAdd from "@/views/menu/MenuAdd";

export default {
  name: "AllMenu",
  components: {
    MenuAdd
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const zhCN = proxy.zhCN
    const loading = ref(false)
    const current = ref(1)
    const size = ref(5)
    const total = ref()
    let dataSource = reactive({
      data: []
    })
    const searchInfo = reactive({
      menuid: '',
      menucode: '',
      fatherid: '',
      menuname: '',
      status: null,
      timeRange: [],
      starttime: '',
      endtime: '',
      current: current,
      size: size,
      sort: '0'
    })
    const columns = reactive([
      {
        title: '菜单ID',
        dataIndex: 'menuid',
        sorter: true
      },
      {
        title: '菜单名称',
        dataIndex: 'menuname'
      },
      {
        title: '菜单码',
        dataIndex: 'menucode'
      },
      {
        title: '父级菜单ID',
        dataIndex: 'fatherid'
      },
      {
        title: '激活状态',
        dataIndex: 'status',
        key: 'status'
      },
      {
        title: '创建时间',
        dataIndex: 'createtime'
      },
      {
        title: '操作',
        key: 'action'
      }
    ])
    onMounted(() => getData())
    watch(() => searchInfo.timeRange, (newVal) => {
      if (newVal) {
        searchInfo.starttime = newVal[0]
        searchInfo.endtime = newVal[1]
      } else {
        searchInfo.starttime = ''
        searchInfo.endtime = ''
      }
    })

    /** 获取列表数据 **/
    function getData() {
      loading.value = true
      apiRequest(queryAllMenu(searchInfo), response => {
        loading.value = false
        let data = response.data
        dataSource.data = data.records
        current.value = data.current
        size.value = data.size
        total.value = data.total
      });
    }

    const pagination = computed(() => ({
      total: total.value,
      current: current.value,
      pageSize: size.value,
    }));
    const handleTableChange = (pag, filters, sorter) => {
      if (sorter && sorter.order === "ascend") {
        searchInfo.sort = "1"
      } else {
        searchInfo.sort = "0"
      }
      searchInfo.current = pag.current
      searchInfo.size = pag.pageSize
      getData()
    };

    /** 条件查询 **/
    function searchRes() {
      getData()
    }

    /** 清空查询条件 **/
    const allMenuRef = ref()

    function resetForm() {
      allMenuRef.value.resetFields();
    }

    /** 新增菜单modal **/
    const addVisible = ref(false)

    // 新增按钮
    function addRes() {
      addVisible.value = true
    }

    /** 修改菜单modal **/
    let updateData = ref();

    function updateRes(record) {
      addVisible.value = true
      /**
       * props 的类型为基本数据类型时，子组件不能改变父组件的值
       * props 的类型为引用数据类型时，子组件是可以改变父组件的值的
       */
      updateData.value = JSON.parse(JSON.stringify(record))
    }

    function handleOk() {
      addVisible.value = false
      updateData.value = null
      getData()
    }

    function handleCancel() {
      addVisible.value = false
      updateData.value = null
    }

    /** 删除菜单 **/
    function deleteRes(record) {
      const deleteInfo = {
        menuid: record.menuid
      }
      apiRequest(deleteMenu(deleteInfo), () => {
        proxy.$Message.success("删除菜单成功")
        getData()
      })
    }

    return {
      ...toRefs(dataSource),
      searchInfo,
      pagination,
      loading,
      columns,
      allMenuRef,
      resetForm,
      handleTableChange,
      searchRes,
      zhCN,
      addVisible,
      addRes,
      updateData,
      updateRes,
      deleteRes,
      handleOk,
      handleCancel,
    }
  }
}
</script>

<style>
.query-div {
  margin-bottom: 10px;
  padding: 5px 0 5px 10px;
  box-shadow: 0 0 10px #f0f1f2;
}

.query-form {
  justify-content: space-between;
}

.query-form > div {
  margin-bottom: 10px !important;
}

.query-form .ant-form-item-label label {
  width: 70px !important;
}

.query-form .ant-form-item-control-input-content {
  width: 200px;
}

.query-button {
  display: flex;
  justify-content: center;
}

.query-button button {
  margin-right: 10px;
}

.ant-table-striped .table-striped td {
  background-color: #fafafa;
}
</style>
